/* 聊天室的主要功能 */

// data格式例子
// {
//   msg: '你好',
//   username: '倪哥',
//   avatar: 'images/avatar07.jpg',
//   toName: '群聊'
// }

// 连接socketio服务
var socket = io('http://192.168.2.197:3000')
var username, avatar  // 存储登录用户名和头像
var toName = '群聊'
var countAll = 0
var globalCount = 1000
// var privacyList = {}

// 选择头像
$('#login_avatar li').on('click', function () {
  $(this).addClass('now').siblings().removeClass('now')
})
// 点击按钮，登录
$('#loginBtn').on('click', function () {
  // 获取用户名
  var username = $('#username').val().trim()
  if (!username) {
    window.alert('请输入用户名')
    return
  }
  // 获取选择的头像
  var avatar = $('#login_avatar li.now img').attr('src')
  console.log(username, avatar)
  // 需要告诉socket io服务，登录
  socket.emit('login', {
    username,
    avatar
  })
})
// 监听登录失败的请求
socket.on('loginError', data => {
  window.alert('用户名已存在')
})

// 监听登录成功的请求
socket.on('loginSuccess', data => {
  // 登录成功
  // 隐藏登录窗口
  $('.login_box').fadeOut()
  // 显示聊天窗口
  $('.container').fadeIn()
  // 设置个人信息
  $('.avatar_url').attr('src', data.avatar)
  $('.user-list .username').text(data.username)

  username = data.username
  avatar = data.avatar
})

// 监听用户加入群聊的消息
socket.on('addUser', data => {
  // 添加一条系统消息
  $('.box-bd').append(`
    <div class="system">
      <p class="message_system">
        <span class="content">${data.username} 加入了群聊</span>
      </p>
    </div>
  `)
  scrollIntoView()
})

// 监听用户离开群聊的消息
socket.on('delUser', data => {
  // 添加一条系统消息
  $('.box-bd').append(`
    <div class="system leave">
      <p class="message_system">
        <span class="content">${data.username} 退出了群聊</span>
      </p>
    </div>
  `)
  scrollIntoView()
})

// 监听用户列表的消息
socket.on('userList', data => {
  // 把userlist中的数据动态渲染到左侧用户列表
  $('.user-list ul').html('')
  $('.user-list ul').append(`
    <li class="user active">
      <div class="name">群聊</div>
    </li>
  `)
  data.forEach(item => {
    if($('.user-list header username').text != $('.user-list ul li name').text){
      $('.user-list ul').append(`
      <li class="user">
        <div class="avatar"><img src="${item.avatar}" alt=""></div>
        <div class="name">${item.username}</div>
      </li>
    ` )
    }
    
  })
  $('#userCount').text(data.length)
  clickUser()
})


// 监听接收聊天消息
socket.on('receiveMessage', data => {
  console.log('收到消息', data)
  // 前台展示消息
  if (data.toName === '群聊') {
    countAll ++
    if (username === data.username) {
      console.log("自己的广播消息")
      // 自己的消息
      $('.box-bd').append(`
        <div class="message-box">
          <div class="my message">
            <img src="${data.avatar}" alt="" class="avatar">
            <div class="content">
              <div class="bubble">
                <div class="bubble_cont">${data.msg}</div>
              </div>
            </div>
          </div>
        </div>
      `)
    } else {
      console.log("别人的广播消息")
      // 别人的消息
      $('.box-bd').append(`
        <div class="message-box">
          <div class="other message">
            <img src="${data.avatar}" alt="" class="avatar">
            <div class="nickname">${data.username}</div>
            <div class="content">
              <div class="bubble">
                <div class="bubble_cont">${data.msg}</div>
              </div>
            </div>
          </div>
        </div>
      `)
    }
  } else {
    // 私聊
    globalCount ++
    if (username === data.username) {
      console.log("自己的私聊消息")
      // 自己的消息
      $('.box-bd').append(`
        <div class="message-box">
          <div class="my message">
            <img src="${data.avatar}" alt="" class="avatar">
            <div class="content">
              <div class="bubble">
                <div class="bubble_cont">${data.msg}</div>
                <div class="bubble_toName">私聊</div>
              </div>
            </div>
          </div>
        </div>
      `)
    } else {
      console.log("别人的私聊消息")
      // 别人的消息
      $('.box-bd').append(`
        <div class="message-box">
          <div class="other message">
            <img src="${data.avatar}" alt="" class="avatar">
            <div class="nickname">${data.username}</div>
            <div class="content">
              <div class="bubble">
                <div class="bubble_cont">${data.msg}</div>
                <div class="bubble_toName">私聊</div>
              </div>
            </div>
          </div>
        </div>
      `)
    }
    scrollIntoView()
  }

  // 将群聊和私聊消息存在本地
  if (data.toName === '群聊'){
    localforage.setItem(`${countAll}`, data).then(function(value) {
    }).catch(function(err) {
      console.log(err);
    });
  }else{
    // 将私聊消息存在本地
    localforage.setItem(`${globalCount}`, data).then(function (value) {
    }).catch(function(err) {
      console.log(err);
    });

  }

  scrollIntoView()
})

// 当有消息时，将滑动到底部
function scrollIntoView () {
  // 当前元素的底部滚动到可视区
  $('.box-bd').children(':last').get(0).scrollIntoView(false)
}

// 恢复群聊内容
function recover(){
  for(let i=0;i<=countAll;i++){
    localforage.getItem(`${i}`).then(function(value) {
        // 当离线仓库中的值被载入时，此处代码运行
        if(username === value.username){
          $('.box-bd').append(`
              <div class="message-box">
                <div class="my message">
                  <img src="${value.avatar}" alt="" class="avatar">
                  <div class="content">
                    <div class="bubble">
                      <div class="bubble_cont">${value.msg}</div>
                    </div>
                  </div>
                </div>
              </div>
            `)
        }else{
          $('.box-bd').append(`
              <div class="message-box">
                <div class="other message">
                  <img src="${value.avatar}" alt="" class="avatar">
                  <div class="nickname">${value.username}</div>
                  <div class="content">
                    <div class="bubble">
                      <div class="bubble_cont">${value.msg}</div>
                    </div>
                  </div>
                </div>
              </div>
            `)
        }
    }).catch(function(err) {
        console.log(err);
    });
  }
}

// 恢复私聊内容
function recoverPrivacy(){
  for(let j=1000;j<=globalCount;j++){
    localforage.getItem(`${j}`).then(function(value) {
        // 当离线仓库中的值被载入时，此处代码运行
        if (username === value.username) {
          $('.box-bd').append(`
            <div class="message-box">
              <div class="my message">
                <img src="${value.avatar}" alt="" class="avatar">
                <div class="content">
                  <div class="bubble">
                    <div class="bubble_cont">${value.msg}</div>
                    <div class="bubble_toName">私聊</div>
                  </div>
                </div>
              </div>
            </div>
          `)
        } else {
          $('.box-bd').append(`
            <div class="message-box">
              <div class="other message">
                <img src="${value.avatar}" alt="" class="avatar">
                <div class="nickname">${value.username}</div>
                <div class="content">
                  <div class="bubble">
                    <div class="bubble_cont">${value.msg}</div>
                    <div class="bubble_toName">私聊</div>
                  </div>
                </div>
              </div>
            </div>
          `)
        }
        console.log(value);
    }).catch(function(err) {
        // 当出错时，此处代码运行
        console.log(err);
    });
  }
}

// 聊天功能
$('#btn-send').on('click', () => {
  var content = $('#content').html().trim()
  $('#content').html('')
  if (!content) {
    return window.alert('请输入内容')
  }
  if (toName === '群聊') {
    console.log("toName === '群聊'")
  // 发送消息给服务器
    socket.emit('sendMessage', {
      msg: content,
      username,
      avatar,
      toName
    })
  } else {
    console.log("toName === " + toName)
    // 发送私聊消息给服务器
    socket.emit('sendMessageToOne', {
      msg: content,
      username,
      avatar,
      toName: toName
    })
  }
})

// 点击用户事件绑定
function clickUser () {
  $('.user').on('click', function () {
    $(this).addClass('active').siblings().removeClass('active')
    var to = $(this).children('.name').text()
    $('#chatName').text(to)
    toName = to
    console.log("点击用户事件绑定，toName = "+ toName)
    if(toName != "群聊"){
      // 先清空当前聊天框
      $('.box-bd').html('')
      // 再恢复私聊聊天框
      recoverPrivacy()
    }else{
      // 先清空当前聊天框
      $('.box-bd').html('')
      // 再恢复群聊聊天框
      recover()
    }
  })
}